<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>detail</title>
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body background="img/backgroundimg.jpg">
    <div href="#" class="layui-icon layui-icon-return" id="back"></div>
    <p class="bt">信息详情页</p>

    <!-- 导航列表 -->
    <nav class="list">
        <ul>
            <li class="item"><a href="#">首页</a></li>
            <li class="item"><a href="#">Javascript</a></li>
            <li class="item"><a href="#">CSS</a></li>
            <li class="item"><a href="#">VUE</a></li>
            <li class="item"><a href="#">HTML</a></li>
            <li class="item"><a href="#">jquery</a></li>
        </ul>
    </nav>

    <!-- 目录 -->
    <div id="guide">
        <a href="#0"><button style="font-size: 40px;"><img src="img/开发.png" alt="">基本介绍</button></a>
        <a href="#1"><button style="font-size: 40px;"><img src="img/开发.png" alt="">优势</button></a>
        <a href="#2"><button style="font-size: 40px;"><img src="img/开发.png" alt="">劣势</button></a>
        <a href="#3"><button style="font-size: 40px;"><img src="img/开发.png" alt="">历史</button></a>
    </div>

    <!-- 文字 -->

    <!-- 首页 -->
    <div class="wenzi" id="index">
        <h2 style="text-align: center;">欢迎来到信息详情页</h2>
        <h3>本页面将介绍以下5种语言：</h3>
        <h4>.Javascript <br> .css <br> .VUE <br> .HTML <br> .jQuery <br></h4>
        <h3>点击右侧菜单栏，选择你想了解的语言吧</h3>
    </div>

    <!-- html -->
    <div class="wenzi" id="html">

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>HTML的基本介绍</strong></h1>
        <h4>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
        </h4>
        <img src="img/html0p.png" alt="" width="100%" height="100%">

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>HTML的优势</strong></h1><img src="img/HTML1p.png"
            alt="" width="300px" height="150px" style="left: 200px;">
        <h3>1、解决了跨浏览器问题</h3>在HTML5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到不同的页面效果。在HTML5中，
        纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需简单地添加JavaScript代码就可以使用新的元素。推荐了解黑马程序员web前端课程。
        <h3>2、新增了多个新特性</h3>
        HTML语言从1.0到5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。<br>

        ●新的特殊内容元素，比如header、nav、section、article、footer。<br>

        ● 新的表单控件，比如calendar、date、time、email、url、search。<br>

        ● 用于绘画的canvas元素。<br>

        ● 用于媒介回放的video和audio元素。<br>

        ● 对本地离线存储的更好支持。<br>

        ● 地理位置、拖曳、摄像头等API。<br>
        <img src="img/html1p2.jpg" alt="">
        <h3>3.用户优先的原则</h3>HTML5标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，规范会把用户放在第一位。另外，为了增强HTML5的使用体验，还加强了以下两方面的设计。<br>

        ● 安全机制的设计<br>

        为确保HTML5的安全，在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于来源的安全模型，该模型不仅易用，而且对不同的API(Application Programming Interface
        ，应用程序编程接口)都通用。使用这个安全模型，不需要借助于任何不安全的hack就能跨域进行安全对话。<br>

        ● 表现和内容分离<br>

        表现和内容分离是HTML5设计中的另一个重要内容。实际上，表现和内容的分离早在HTML4.0中就有设计，但是分离的并不彻底。为了避免可访问性差、代码高复杂度、
        文件过大等问题，HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题，一些陈旧的表现和内容的代码还是可以兼容使用的。<br>

        4.化繁为简的优势<br>
        <img src="img/html1p3.jpg" alt="" width="400px" height="200px">

        作为当下流行的通用标记语言，HTML5尽可能地简化，严格遵循了“简单至上”的原则，主要体现在这几个方面：<br>

        ● 新的简化的字符集声明;<br>

        ● 新的简化的DOCTYPE;<br>

        ● 简单而强大的HTML5 API;<br>

        ● 以浏览器原生能力替代复杂的JavaScript代码。 为了实现这些简化操作，HTML5规范需要比以前更加细致、精确。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。<br>

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>HTML的劣势</strong></h1><img src="img/html2p.jpg"
            alt="">
        <h3>1.安全</h3>像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的 功能很容易被黑客利用，来盗取用户的信息和资料。
        <h3>2.完善性</h3>许多特性各浏览器的支持程度也不一样。
        <h3>3.技术门槛</h3>HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、 web storage
        等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
        <h3>4.性能</h3>某些平台上的引擎问题导致HTML5性能低下。
        <h3>5.浏览器兼容性</h3>最大缺点，IE9以下浏览器几乎全军覆没。

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>HTML的历史</strong></h1>
        <img src="img/html3p.jpg" alt="">
        <h3>1.HTML（第一版）：</h3>1993年6月由互联网工程工作小组发布的HTML工作草案。这个版本没有标准版本，主要是因为当时有很多版本的HTML，没有形成一个统一的标准，所以没有正式的HTML1.0.
        <h3>2.HTML2.0：</h3>995年11月作为RFC（Request For Comments 一系列以编号排定的文件）1866发布。
        <h3>3.HTML3.2：</h3>1996年1月14日，由W3C组织发布，是HTML文档第一个被广泛使用的标准。由于该版本年代较早，很多东西都已经过时，在2018年3月15日被取消作为标准。
        <h3>4.HTML4.0：</h3>1997年12月18日，由W3C组织发布，是HTML文档另一个重要的、广泛使用的标准。
        <h3>5.HTML4.01：</h3>1999年12月24日，W3C组织发布。这也是另一个被广泛使用的标准。
        <h3>6.XHTML1.0：</h3>2000年1月26日，W3C组织推荐标准。后来经过修订于2002年8月日重新发布。
        <h3>7.XHTML1.1:</h3>XHTML最后的独立标准，2.0止于草案阶段。XHTML5则是属于HTML5标准的一部分，且名称已改为“以XML序列化的HTML5”，而非“可扩展的HTML”。
        <h3>8.HTML5:</h3>HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。<br>
        <img src="img/html3p2.png" alt="">
    </div>

    <!-- js -->
    <div class="wenzi" id="js">

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14); text-align: center;"><strong>Javascript的基本介绍</strong></h1>
        <img src="img/js0p.png" alt="" width="100%" height="100%">
        <h4>JavaScript简称JS，是一种解释型或即时编译型的高级编程语言，虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格
            JavaScript是全世界通用且应用最为广泛的客户端脚本语言,几乎市面上绝大部分的网站、APP的客户端脚本都是用JS写的，拥有绝对的垄断地位
            JavaScript的标准是ECMAScript ，截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，简称es5，旧版本的浏览器至少支持ECMAScript 3
            标准，2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript2015，但通常被称为ECMAScript 6，简称es6</h4>
        <img src="img/js0p3.jpg" alt="" width="100%" height="100%">

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14); text-align: center;"><strong>Javascript的优势</strong></h1>
        <br><img src="img/js1p.jpg" alt="" width="100%" height="100%">
        <h3>1、解释性的脚本语言</h3>与其他脚本语言一样，JavaScript也是一种解释性语言，它提供了非常方便的开发过程。JavaScript的基本语法结构与C、C++、Java非常相似。
        但是在使用之前，与这些语言不同，它们需要先被编译，但是在运行程序的过程中需要逐行解释。javascript与HTML标识符结合使用，方便用户操作。<br>
        <h3>2、基于对象</h3>它也可以看作是一种面向对象的语言，这意味着JavaScript可以使用它创建的对象。因此，许多函数可以来自脚本环境中对象方法和脚本之间的交互。
        <h3>3、简单而弱的类型</h3>
        它的简单性主要体现在：第一，JavaScript是一个基于Java基本语句和控制流的简单而紧凑的设计，这是一个非常好的过渡，供用户学习Java或其他C语言编程语言。而对于具有C语言编程能力的程序员来说，JavaScript非常容易使用；其次，它的变量TYP。ES是弱势阶级。类型1不使用严格的数据类型。<br>
        <h3>4、安全性</h3>JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。<br>
        <h3>5、事件驱动</h3>
        javascript以事件驱动的方式响应用户。通过在网页中执行操作生成的操作称为事件。例如，按下鼠标，移动窗口，选择菜单等都可以视为事件。当一个事件发生时，它可能会引起相应的事件响应并执行一些相应的脚本。这种机制称为“事件驱动”。<br>
        <h3>6、跨平台</h3>
        JavaScript依赖于浏览器本身，与操作环境无关。只要计算机能运行浏览器，支持javascript浏览器，就可以正确执行，实现“一次写，环游世界”的梦想。因此，javascript是一种可以嵌入到HTML文件中的新描述语言。JavaScript语言可以响应用户需求事件（例如表单输入），
        而不需要任何网络来回传输数据。因此，当用户输入数据时，数据可以由客户机应用程序直接处理，而不是由服务器处理。
        
        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14); text-align: center;"><strong>Javascript的劣势</strong></h1>
        <br><img src="img/js2p" alt="">
        <img src="img/js0p2.jpg" alt="" width="100%" height="100%">
        <h3>1、安全性</h3>JavaScript被显示的添加到网页和客户浏览器，它可以利用客户系统，有风险的代码可能在客户机器上执行。<br>
        <h3>2、浏览器支持</h3>JavaScript在不同的浏览器中有时进行不同的解释。不同层引擎对Javascript有不同的渲染结果，
        这都是因为不同的功能和接口的差异性。大部分JavaScript依赖浏览器DOM元素的操作。并且，不同的浏览器对对象的访问类型不一样，尤其是Internet Explorer。
        <h3>3、更多更好的竞争对手</h3>JavaScript是机器上运行的非常老的脚本化语言，其实有其他的技术可以取代它做同样的事情。(如 JQuery )，并且更好更简单。
        <h3>4、关闭javascript</h3>如果关闭浏览器的JavaScript支持，整个JavaScript代码就不会运行了。
        <h3>5、文件下载</h3>JavaScript文件可以在客户端电脑下载，任何人都可以阅读并且可以重复利用。
        
        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14); text-align: center;"><strong>Javascript的历史</strong></h1>
        <br>
        <h3>Javascript的诞生</h3><img src="img/js3p.jpg" width="150px" height="150px"
            alt="">1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。……网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。
        网页脚本语言到底是什么语言？网景公司当时有两个选择：一个是采用现有的语言，比如Perl、Python、Tcl、Scheme等等，允许它们直接嵌入网页；另一个是发明一种全新的语言。这两个选择各有利弊。第一个选择，有利于充分利用现有代码和程序员资源，
        推广起来比较容易；第二个选择，有利于开发出完全适用的语言，实现起来比较容易。底采用哪一个选择，网景公司内部争执不下，管理层一时难以下定决心
        就在这时，发生了另外一件大事：1995年Sun公司将Oak语言改名为Java，正式向市场推出。
        Sun公司大肆宣传，许诺这种语言可以”一次编写，到处运行”（Write Once, Run Anywhere），它看上去很可能成为未来的主宰。
        网景公司动了心，决定与Sun公司结成联盟。它不仅允许Java程序以applet（小程序）的形式，直接在浏览器中运行；甚至还考虑直接将Java作为脚本语言嵌入网页，只是因为这样会使HTML网页过于复杂，后来才不得不放弃。
        总之，当时的形势就是，网景公司的整个管理层，都是Java语言的信徒，Sun公司完全介入网页脚本语言的决策。因此，Javascript后来就是网景和Sun两家公司一起携手推向市场的，这种语言被命名为”Java+script”并不是偶然的。
        <h3>发明者</h3> <img src="img/jsfm.jpg" alt="" width="150px" height="120px">Eich。1995年4月，网景公司录用了他。
        Brendan Eich的主要方向和兴趣是函数式编程，网景公司招聘他的目的，是研究将Scheme语言作为网页脚本语言的可能性。
        仅仅一个月之后，1995年5月，网景公司做出决策，未来的网页脚本语言必须”看上去与Java足够相似”，但是比Java简单，使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了
        Brendan Eich被指定为这种”简化版Java语言”的设计师。
        但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。
        由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果Brendan
        Eich预见到，未来这种语言会成为互联网第一大语言，全世界有几百万学习者，他会不会多花一点时间呢？<br>
        总的来说，他的设计思路是这样的：<br>
        <h4>（1）借鉴C语言的基本语法；<br>
            （2）借鉴Java语言的数据类型和内存管理；<br>
            （3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；<br>
            （4）借鉴Self语言，使用基于原型（prototype）的继承机制。<br>
        </h4>
        
    </div>

    <!-- css -->
    <div class="wenzi" id="css">
        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>CSS的基本介绍</strong></h1>
        <img src="img/css0p.jpg" alt="" width="50%" height="50%">
        <h4>CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言
            CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式。
            CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
        </h4>
        
        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>CSS的优势</strong></h1><img src="img/css1p.jpg"
            alt="" width="90%" height="90%">
        <h3>1.节省时间</h3>可以编写一次CSS，然后在多个HTML页面中通过外部引入多次​重复使用
        <h3>2.页面加载速度更快</h3>通过使用CSS，就不需要每次都编写HTML标记属性，只需要编写一个标记的CSS规则，并将其应用于该标记的所有实例，因此代码大大减少也就意味着下载时间短。
        <h3>3.易于维护</h3>如果要进行全局更改，则只需​更改样式​，所有网页中的所有元素都将会自动更新。
        <h3>4.​多设备兼容性</h3>样式表允许针对多种不同类型的设备进行优化内容。
        <h3>5.浏览器在样式表中​从上到下​读取样式定义</h3>我们在样式表中定义的样式将覆盖样式表中先前定义的任何先前样式，不过我们可以在后面的元素中重新定义则不会被覆盖。
        
        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>CSS的劣势</strong></h1><img src="img/css2p.png"
            alt="" width="400px" height="200px" style="position:relative;top:100px;left: 500px;">
        <h3>1.无法定义变量</h3>一些很常用的属性值无法将其赋值给变量，然后进行调用变量来进行使用。
        <h3>2.计算问题</h3>CSS没有变量，也就谈不上计算。CSS一般都是自己算好固定值填写上去，当很多值是以某个值为基准进行变化，当这个基准值进行变化后，其他很多值都会进行相应的变化，此时相关的维护工作难度就会增大。
        <h3>3.重复代码</h3>
        CSS的继承机制是根据HTML的层级关系来决定的，如果HTML文档中存在父子元素的关系，那么子元素可以继承父元素的部分属性，而没有父子关系的则不能进行继承。在很多情况下，几个元素拥有类似的定义，却没有父子关系，此时不得不定义大量重复的代码。
        <h3>4.作用域和命名空间</h3>CSS通过子元素选择器或后代元素选择器可以实现作用域和命名空间。
        
        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>CSS的历史</strong></h1><img src="img/css3p1.jpg"
            alt="" width="300px" style="position:relative;top:100px;left: 500px;">
        <img src="img/css3p2.png" alt="" style="position:relative;top:20px; right: 420px; " width="50%" height="50%">
        <h3>css的诞生</h3>20 世纪 90 年代蒂姆·伯纳斯·李（Tim Berners-Lee）发明万维网，创造 HTML
        超文本标记语言。此后网页样式便以各种形式存在，不同的浏览器有自己的样式语言来控制页面的效果，因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。<br>
        <img src="img/css3p3.png" alt="">
        <img src="img/css3p4.png" alt="" style="position:relative;top:20px; right: 100px;">
        <h3>语法的确定</h3>早期 CSS 的语法设计看上去类似后来的 JavaScript 语法（当时 JavaScript 尚未存在），实际上，CSS 的这个写法借鉴了 X11 Window System 中的 X 资源。
        <img src="img/css3p5.png" alt="">
        <p>在第一稿建议中，有一个影响百分比的说明符：h1.font.size = 20pt 80%。
            行尾百分比的作用是想要通过这个百分比来控制该值的权重，如字号设置为 20pt，权重设置 80%，最终将字号值与权重组合在一起，值为 16pt。
            这个写法的设计初衷是想将开发者与用户的要求与偏好组合到一起，CSS 之父哈肯·维姆·莱（Håkon Wium Lie） 提议 CSS
            应该有一把滑尺，这样开发者与用户都有完全的控制力。当时这个提议引起了大家的讨论，但由于这个办法对如 font-size 等属性管用，但对另一些属性如 font-family
            就不好用了，所以最终这个百分比的用法还是被舍弃了。
            至于 CSS 的语法由 font.size 改成font-size，是怎么设计来的呢？首先，连字符读起来更像书面英语，简单易懂。其次，DSSSL（Document Style Semanticsand
            Specification Language，文档样式语义和规范语言） 和 DSSSL-Lite就使用这种连字符属性名。于是，CSS 也从中借鉴了连字符。
            经过多年的努力 ，到1996年底，最终CSS语法变成了现在这个样子：
        </p>
        <img src="img/css3p6.png" alt="">
        <img src="img/css3p7.png" alt="" style="position:relative;top:20px; right: 100px;">
        <h3>CSS历史大事件</h3>1994 年，Håkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。
        紧接着，他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议，1995 年他们一起再次展示了这个建议。当时 W3C 刚刚建立，W3C 对 CSS 很感兴趣，为此专门组织了一次讨论会。
        1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
        1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。
        这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的发展奠定了基础。
        1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。
        CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。
        2005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没有最终定稿。
        
    </div>

    <!-- vue -->
    <div class="wenzi" id="vue">

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>VUE的基本介绍</strong></h1>
        <h3>什么是VUE</h3>
        <h4>.Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。
            2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。<br>
            .在GitHub上，该项目平均每天能收获95颗星，[为Github有史以来星标数第3多的项目。<br>
            .Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。<br>
            .Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。<br>
            .在为AngularJS工作之后，Vue的作者尤雨溪开发出了这一框架。他声称自己的思路是提取Angular中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue最早发布于2014年2月。<br>
            .作者在Hacker News、Echo
            JS与Reddit的/r/javascript版块发布了最早的版本。一天之内，Vue就登上了这三个网站的首页。Vue是Github上最受欢迎的开源项目之一。同时，在JavaScript框架/函数库中，Vue所获得的星标数已超过React，并高于Backbone.js、Angular
            2、jQuery等项目。</h4>
        <img src="img/vue0p.jpg" alt="" width="100%" height="100%">
        <h3>VUE是做什么的？</h3>
        <h4>Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。<br>
            通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量；<br>
            与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选，把自己不喜欢再一件件的扔了，甚至required 必须用且耗费空间的！<br>
            简而言之，vue做了必须的事，又不会做职责之外的事。</h4>

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>VUE的优势</strong></h1>
        <h4>1.vue两大特点：响应式编程、组件化。</h4>
        <h4>2.vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。</h4>
        <h4>3.vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。</h4>
        <h4>4.响应式的数据绑定,这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出响应。</h4>
        这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。<br>
        <img src="img/vue1p.jpg" alt="">
        <img src="img/vue1p2.jpg" alt="">
        <h4>5.组件化开发,Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），
            并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。</h4>
        <h4>2.3、Virtual DOM,
            在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
            而Virtual
            DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
        </h4>

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>VUE的劣势</strong></h1><img src="img/vue2p.jpg"
            alt="" width="300px" height="200px">
        <h4>1.VUE不支持IE8</h4>
        <h4>2.Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。</h4>
        <h4>3.可扩展性稍差</h4>
        <h4>4.生态环境差不如angular和react</h4>
        </p>

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>VUE的历史</strong></h1><img src="img/vue3p.jpg"
            alt="">
        <h3>重要版本发布</h3>2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。
        2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。<br>
        2014.01.24，Vue 正式对外发布，版本号是 0.8.0。<br>
        2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。<br>
        2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。<br>
        2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。<br>
        2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。 <br>
        2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。<br>
        2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。<br>
    </div>
    <!-- jquery -->
    <div class="wenzi" id="jquery">

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>jQuery的基本介绍</strong></h1>
        <img src="img/jquery0p.jpg" alt="" width="80%" height="80%">
        <h4>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write
            Less，Do More”，即倡导写更少的代码，做更多的事情。
            它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
        </h4>
        <h4>jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE
            6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等</h4>

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>jQuery的优势</strong></h1>
        <img src="img/jquery1p.jpg" alt="">
        <h3>（1）轻量级</h3>jQuery非常轻巧，采用Dean
        Edwards的Packer(http://dean.edwards.name/packer/)压缩后，只有不到30KB的大小，如果服务器端启用gzip压缩后，甚至只有16KB的大小！
        <h3>（2）强大的选择器</h3>jQuery可以让操作者使用从CSS 1到CSS
        3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。如果你需要，还可以加入插件使其支持XPath选择器！下一章我们将为你详细讲解jQuery中强大的选择器。
        <h3>3）出色的DOM操作的封装</h3>
        jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。第三章将为你重点介绍jQuery中优雅的DOM操作。
        <h3>（4）可靠的事件处理机制</h3>jQuery的事件处理机制吸取了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery处理事件绑定的时候相当的可靠。在预留退路(graceful
        degradation)方面，jQuery也做的非常不错。
        <img src="img/jQuery1p2.jpg" alt="" style="position:relative;top:100px;left: 700px;">
        <h3>5）完善的Ajax</h3>
        jQuery将所有的Ajax操作封装到一个函数$.ajax里，使得我们处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。第六章将为你重点介绍jQuery中的Ajax处理。
        <h3>（6）不污染顶级变量</h3> jQuery只建立一个名为jQuery的对象，其所有的方法都在这个对象之下。另外的一个别名$也是可以随时交出控制权的。绝对不会污染其它的对象！
        <h3>（7）出色的浏览器兼容性</h3>作为一个流行的JavaScript库，浏览器的兼容性自然是必须具备的条件之一。jQuery能够在IE 6.0+、FF 2+、Safari 2.0+和Opera
        9.0+下正常运行。同时修复了一些浏览器之间的差异。使你不用在开展项目前忙于建立一个浏览器兼容库而焦头烂额。
        <h3>（8）链式操作方式</h3>
        jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可直接连写而无需重复获取对象。这一点使jQuery的代码无比优雅。请注意，在章节1.3.3中，我们将要讨论相应代码风格的问题。
        <img src="img/jquery1p3.png" alt="">
        <h3>（9）行为层与结构层的分离</h3>开发者不需要再去html调用事件，而是直接使用jQuery选择器选中元素，然后直接给元素添加事件。
        <h3>（10）丰富的插件支持</h3>
        任何事物的壮大，如果没有很多人的支持，是永远发展不起来的。jQuery的易扩展性，吸引了来自全球的开发者来共同编写jQuery的扩展插件。目前已经有超过几百种的官方插件支持。在第七章，我们将介绍目前流行的几款插件并指导大家动手编写自己的插件。
        <h3>（11）完善的文档</h3>jQuery的文档是非常丰富的，现阶段多为英文文档，而中文文档较少。当然，很多热爱jQuery的团队都在为这个努力，比如图灵教育翻译的《Learning jQuery》。
        <h3>（12）开源</h3> jQuery是一个开源的产品，任何人都可以自由的使用。

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>jQuery的劣势</strong></h1>
        <img src="img/jquery2p.jpg" alt="" width="700px" height="400px">
        <h3>
            <1>.不能向后兼容
        </h3>每一个新版本不能兼容早期的版本。举例来说，有些新版本不再支持某些selector，新版jQuery却没有保留对它们的支持，而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。
        <h3>
            <2>.插件兼容性
        </h3>
        与上一点类似，当新版jQuery推出后，如果开发者想升级的话，要看插件作者是否支持。通常情况下，在最新版jQuery版本下，现有插件可能无法正常使用。开发者使用的插件越多，这种情况发生的几率也越高。我有一次为了升级到jQuery
        1.3，不得不自己动手修改了一个第三方插件。
        <h3>
            <3>.多个插件冲突
        </h3>在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题，但却又确实是一个难于调试和解决的问题。
        <img src="img/jquery2p2.jpg" alt="">
        <h3>
            <4>.jQuery的稳定性
        </h3>jQuery没有让浏览器崩溃，这里指的是其版本发布策略。jQuery 1.3版发布后仅过数天，就发布了一个漏洞修正版1.3.1。他们还移除了对某些功能的支持，可能会影响许多代码的正常运行。我希望类似修改不要再出现。
        <h3>
            <5>.对动画和特效的支持差
        </h3>在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

        <br>
        <a></a>
        <h1 style="font-family: 华文彩云; color: rgb(15, 14, 14);"><strong>jQuery的历史</strong></h1>
        <img src="img/jquery3p.jpg" alt="" width="100%" height="100%">
        <h4>John Resig在2005年开发了JQuery的第一个版本，并且在BarCampNYC中宣布了它。在jQuery网站中，他写到：</h4>
        <h5 style="color: darkgrey;">
            jQuery是一个JavaScript库为了让编写JavaScript代码变得有趣。jQuery通过封装通用性、重复性的功能，移除掉不必要的代码修辞，让JavaScript代码变得简单、精炼和更加可读。</h5>
        <h4>这个筛选引擎最终抽象成一个独立库“Sizzle”。<br>第二个卖点是它抹平了不同浏览器的差异。在它以前，要支持多个浏览器是件非常不容易的事情。
            由于早年浏览器缺乏统一标准，开发者需要兼容不同浏览器解决各种边界情况。<br>通过使用jQuery，开发者就可以让jQuery的团队去完成这些浏览器兼容的事情。后来，jQuery又添加了更多的特性，例如动画和ajax。jQuery自此变成了网站开发的标准依赖库，即使到今天依旧发挥了重要的作用。W3Techs预估当今依然有74%网站使用jQuery。<br>

            jQuery的管理也变得越来越正式，2011年，jQuery团队正式成立委员会，2012年，委员会组成了jQuery基金会。<br>

            到了2015年，jQuery基金会和Dojo基金会合并到了JS基金会，然后到了2019年，又和Node.js基金会合并成OpenJS基金会。
            <img src="img/jquery3p2.jpg" alt="" width="100%" height="100%">
            <h3>变化的环境</h3>


            然而，近年来jQuery的受欢迎程度有所下降。 GitHub从他们网站中删除了jQuery，而Bootstrap
            v5也将丢弃jQuery，因为它是Bootstrap中最大的JavaScript的依赖库（压缩和gzip后30KB）。Web开发的一些趋势削弱了jQuery作为必须使用的工具的地位。

            <h3>浏览器</h3>

            浏览器差异和限制变得不那么重要了。首先是标准化有所改进， 主要的浏览器供应商（Apple，Google，Microsoft和Mozilla）通过Web Hypertext Application Technology
            Working Group在Web标准上进行协作。<br>

            虽然浏览器在很大程度上仍然存在差异，但供应商至少有一种方法可以找到并发展共同点而不是互相发动不间断的战争。 因此，浏览器API变得更加强大
        </h4>
        <img src="img/jquery3p3.png" alt="" width="100%" height="100%">

    </div>
</body>

</html>
<script src="./js/detail.js"></script>